<template>
    <div style="display: flex; flex-direction: row; flex-wrap: wrap">
      <input id="file-upload" type="file" accept="image/*" style="display: none">
      <template v-for="(item, index) in items">
        <div
          class="divider"
          v-if="item.type === 'divider'"
          :key="`divider${index}`"
        />
        <MenuItem
          v-else
          :key="index"
          v-bind="item"
        />
      </template>
      <div style="user-select: none;margin-left: 0" v-show="saved">
        *
      </div>
      <el-popover trigger="click">
        <template #reference>
          <el-button style="border-width: 0 ;width: 80px;height: 30px;margin: 0 10px 0 auto;border-radius: 8px" color="transparent">
            <el-icon color="black"><MoreFilled /></el-icon>
            <div style="color: black;margin-left: 8px">
              More
            </div>
          </el-button>
        </template>
        <template #default>
          <div style="display: flex;flex-direction: column;gap: 5px">
            <el-button plain :icon="FullScreen" @click="openOCR">图像识别</el-button>
            <el-button plain :icon="MagicStick" @click="openTemplateDialogue" style="margin-left: 0">使用模板</el-button>
          </div>
        </template>
      </el-popover>
    </div>
  </template>
  
  <script setup lang="ts">
  import { Editor } from '@tiptap/vue-3'
  import MenuItem from '../MenuItem/index.vue'
  import edit from '../index.vue'
  import {onMounted, ref} from "vue";
  import {FullScreen, MagicStick, MoreFilled} from "@element-plus/icons-vue";
  import {uploadImgAPI} from "@/api/ocr"
  import {currentUser, flaskURL} from '@/global'
  
  const props = defineProps<{ editor: Editor, openOCR: Function, openTemplateDialogue: Function, saved: Boolean}>()
  const editRef = ref(null);

  const uploadImg = () => {
    var fileInput = document.getElementById("file-upload")
    fileInput.click();
  }

  onMounted(() => {
    var fileInput = document.getElementById("file-upload")
    fileInput.addEventListener('change', (event) => { handleChange(event) })
  })

  const handleChange = (event) => {
    if (event.target.files.length === 0) {
      // 空文件
      return
    }

    // 创建表单
    const file = event.target.files[0]

    uploadImgAPI(file)
        .then((response) => {
          var path = response.path;
          if (path.startsWith('.')) {
            path = path.substring(1)
          }
          props.editor?.chain().focus().setImage({src: flaskURL + path}).run()
          event.target.value = ''
        })
  }
  
  const items = [
    {
      icon: 'bold',
      title: 'Bold',
      action: () => props.editor?.chain().focus().toggleBold().run(),
      isActive: () => props.editor?.isActive('bold')
    },
    {
      icon: 'italic',
      title: 'Italic',
      action: () => props.editor?.chain().focus().toggleItalic().run(),
      isActive: () => props.editor?.isActive('italic')
    },
    {
      icon: 'strikethrough',
      title: 'Strike',
      action: () => props.editor?.chain().focus().toggleStrike().run(),
      isActive: () => props.editor?.isActive('strike')
    },
    {
      icon: 'code-view',
      title: 'Code',
      action: () => props.editor?.chain().focus().toggleCode().run(),
      isActive: () => props.editor?.isActive('code')
    },
    {
      icon: 'mark-pen-line',
      title: 'Highlight',
      action: () => props.editor?.chain().focus().toggleHighlight().run(),
      isActive: () => props.editor?.isActive('highlight')
    },
    {
      type: 'divider'
    },
    {
      icon: 'h-1',
      title: 'Heading 1',
      action: () =>
        props.editor?.chain().focus().toggleHeading({ level: 1 }).run(),
      isActive: () => props.editor?.isActive('heading', { level: 1 })
    },
    {
      icon: 'h-2',
      title: 'Heading 2',
      action: () =>
        props.editor?.chain().focus().toggleHeading({ level: 2 }).run(),
      isActive: () => props.editor?.isActive('heading', { level: 2 })
    },
    {
      icon: 'h-3',
      title: 'Heading 3',
      action: () =>
        props.editor?.chain().focus().toggleHeading({ level: 3 }).run(),
      isActive: () => props.editor?.isActive('heading', { level: 3 })
    },
    {
      icon: 'h-4',
      title: 'Heading 4',
      action: () =>
        props.editor?.chain().focus().toggleHeading({ level: 4 }).run(),
      isActive: () => props.editor?.isActive('heading', { level: 4})
    },
    {
      icon: 'align-left',
      title: 'Align Left',
      action: () => props.editor?.chain().focus().setTextAlign('left').run(),
      isActive: () => props.editor?.isActive({textAlign: 'left'})
    },
    {
      icon: 'align-center',
      title: 'Align Center',
      action: () => props.editor?.chain().focus().setTextAlign('center').run(),
      isActive: () => props.editor?.isActive({textAlign: 'center'})
    },
    {
      icon: 'align-right',
      title: 'Align Right',
      action: () => props.editor?.chain().focus().setTextAlign('right').run(),
      isActive: () => props.editor?.isActive({textAlign: 'right'})
    },
    {
      icon: 'paragraph',
      title: 'Paragraph',
      action: () => props.editor?.chain().focus().setParagraph().run(),
      isActive: () => props.editor?.isActive('paragraph')
    },
    {
      icon: 'list-unordered',
      title: 'Bullet List',
      action: () => props.editor?.chain().focus().toggleBulletList().run(),
      isActive: () => props.editor?.isActive('bulletList')
    },
    {
      icon: 'list-ordered',
      title: 'Ordered List',
      action: () => props.editor?.chain().focus().toggleOrderedList().run(),
      isActive: () => props.editor?.isActive('orderedList')
    },
    {
      icon: 'list-check-2',
      title: 'Task List',
      action: () => props.editor?.chain().focus().toggleTaskList().run(),
      isActive: () => props.editor?.isActive('taskList')
    },
    {
      icon: 'code-box-line',
      title: 'Code Block',
      action: () => props.editor?.chain().focus().toggleCodeBlock().run(),
      isActive: () => props.editor?.isActive('codeBlock')
    },
    {
      icon: 'image-line',
      title: 'Image',
      action: () => { uploadImg() },
      isActive: () => { return false }
    },
    {
      type: 'divider'
    },
    {
      icon: 'double-quotes-l',
      title: 'Blockquote',
      action: () => props.editor?.chain().focus().toggleBlockquote().run(),
      isActive: () => props.editor?.isActive('blockquote')
    },
    {
      icon: 'separator',
      title: 'Horizontal Rule',
      action: () => props.editor?.chain().focus().setHorizontalRule().run()
    },
    {
      type: 'divider'
    },
    {
      icon: 'text-wrap',
      title: 'Hard Break',
      action: () => props.editor?.chain().focus().setHardBreak().run()
    },
    {
      icon: 'format-clear',
      title: 'Clear Format',
      action: () =>
        props.editor?.chain().focus().clearNodes().unsetAllMarks().run()
    },
    {
      type: 'divider'
    },
    {
      icon: 'arrow-go-back-line',
      title: 'Undo',
      action: () => props.editor?.chain().focus().undo().run()
    },
    {
      icon: 'arrow-go-forward-line',
      title: 'Redo',
      action: () => props.editor?.chain().focus().redo().run()
    },
    {
      type: 'divider'
    },
    {
      icon: 'save-line',
      title: 'save',
      action: () => props.editor?.commands.saveNote()
    }
  ]
  </script>
  
  <style lang="scss">
  .divider {
    background-color: rgba(#fff, 0.25);
    height: 1.25rem;
    margin-left: 0.5rem;
    margin-right: 0.75rem;
    width: 1px;
    display: inline-block;
  }
  </style>
  
